<template>
  <div class="songListPlayBox">
    <div class="songListPlayTitle">
      推荐歌单
    </div>
    <div class="songListBox">
      <el-row :gutter="50">
        <el-col v-for="(item,index) in songlistList" :key="item.id" :offset="index =0" :span="3">
          <div class="oneListBox" @click="getSongList(item.id)">
            <el-image class="item-img" :src="attachImageUrl(item.pic)" :fit="fits"></el-image>
            <span>{{item.title}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="singerListPlayTitle">
      推荐歌手
    </div>
    <div class="songListBox">
      <el-row :gutter="50">
        <el-col v-for="(item,index) in singerList" :key="item.id" :offset="index =0" :span="3">
          <div class="oneListBox" @click="getSinger(item.id)">
            <el-image class="item-img" :src="attachImageUrl(item.pic)" :fit="fits"></el-image>
            <span>{{item.name}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
  import {
    mixin
  } from '../mixins/index.js';
  export default {
    mixins: [mixin],
    data() {
      return {
        fits: 'cover',
        isplayIcon: false,
        singerList: [],
        songlistList: [],

      }
    },
    created() {
      this.getRequest("/singer/hotSinger").then((res) => {
        this.singerList = res.data;
      });
      this.getRequest("/songList/hotSongList").then((res) => {
        this.songlistList = res.data;
      });
    },
    methods: {
      getSinger(id) {
        this.$store.commit('setActiveName', '');
        this.$router.push({
          path: '/oneSinger',
          query: {
            id: id
          }
        });
      },
      getSongList(id) {
        this.$store.commit('setActiveName', '');
        this.$router.push({
          path: '/oneSongList',
          query: {
            id: id
          }
        });
      }
    }
  }
</script>

<style scoped>
  .item-img {
    width: 100%;
    height: 160px;
    border-radius: 15px;
    background-clip: padding-box;
  }

  .songListPlayBox {
    width: 100%;
  }

  .songListPlayTitle {
    width: 100%;
    height: 48px;
    background-color: whitesmoke;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }

  .singerListPlayTitle {
    margin-top: 10px;
    width: 100%;
    height: 48px;
    background-color: whitesmoke;
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }

  .songListBox {
    margin: 0 50px;
  }

  .oneListBox {
    width: 160px;
    height: 200px;
    text-align: center;
    font-family: 黑体;
    cursor: pointer;
  }

  .oneListBox :hover {
    width: 165px;
    height: 165px;
    text-align: center;
    font-family: 黑体;
    cursor: pointer;
  }

  .imageBox {
    width: 100%;
    height: 160px;
    background-size: cover;
    border-radius: 15px;
    background-clip: padding-box;
  }
</style>
